import { Component, Input } from '@angular/core'
import { Widget } from '../../model'
import { JsonApiService } from '../../../../core/api/json-api.service'

declare const echarts: any

let chart = null

@Component({
  selector: 'api-invoke-rank',
  templateUrl: './api-invoke-rank.html',
  styleUrls: ['./api-invoke-rank.css']
})
// 流量统计（时）
export class ApiInvokeRank implements Widget {
  @Input() componentData: any

  timeTypeAPI = '0'; //用户统计类型

  timeRangeAPI = 10; //流量查询时间段,默认十条数据
  chartOption = {
  };
  loading = false

  constructor(private jsonApiService: JsonApiService) { }

  //API统计类型
  timeTypeAPIChange(val) {
    this.timeTypeAPI = val;
    this.initChart();
  }
  //API时间范围change回调
  timeRangeAPIChange() {
    if (!(this.timeRangeAPI > 0)) {
      this.jsonApiService.message('请输入大于0的数字查询')
      return
    }
    this.initChart();
  }

  initChart() {
    this.loading = true
    let barX: any[] = [],
      seriesData: any[] = [];
    const option = {
      title: {
        top: 6,
        textStyle: {
          fontSize: 14,
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        top: '12',
        left: '22',
        right: '32',
        bottom: '22',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: barX,
        axisTick: {
          alignWithLabel: true
        }
      }],
      yAxis: [{
        type: 'value'
      }],
      series: seriesData,
    };
    chart.clear();
    chart.setOption(option);
    let request = "state=" + Number(this.timeTypeAPI) + "&X=" + parseInt(this.timeRangeAPI + '');
    this.jsonApiService.http('control/station/api/rank/apiInvokeRank.html', request, false).subscribe(data => {
      this.loading = false
      if (data.success) {
        if (!data.data) {
          this.jsonApiService.message('api数据统计为空');
          return
        }
        const result = data.data;
        for (let item of result.nameList) {
          const obj = {
            name: item,
            type: "line",
            data: []
          }
          seriesData.push(obj);
        }
        for (let item in result.resultList) {
          const temItem = item.split(' ');
          const lisItem = item.split(':');
          if (this.timeTypeAPI === '0') {
            barX.push(lisItem[0] + '时');
          } else if (this.timeTypeAPI === '1') {
            barX.push(temItem[0]);
          }
          for (let lis of result.resultList[item]) {
            for (let k = 0; k < seriesData.length; k++) {
              if (seriesData[k].name === lis.apiName) {
                seriesData[k].data.push(lis.count)
              }
            }
          }
        }
        chart.setOption({
          xAxis: [{
            data: barX
          }],
          series: seriesData
        });
      }
    })
  }

  ngAfterViewInit() {
    setTimeout(() => {
      chart = echarts.init(document.getElementById('api-rank'));
      this.initChart()
      window.addEventListener('resize', this.resizeChart)
    }, 0);
  }

  ngOnDestroy() {
    if (!chart) return
    window.removeEventListener('resize', this.resizeChart)
    chart.dispose()
    chart = null
  }

  resizeChart() {
    chart && chart.resize()
  }

}
